<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			
			.rotation,.rotation2{
				width: 600px;
				height: 400px;
				margin: 0 auto;
				position: relative;
				margin-top: 10px;
			}
			
			.rotation>img,.rotation2>img{
				position: absolute;
				top: 0;
				opacity: 0;
				transition: 1s;
			}
			
			button{
				width: 30px;
				height: 50px;
				border-radius: 6px;
				border: 0;
				font-size: 30px;
				position: absolute;
			}
			
			button:nth-of-type(1){
				top: 50%;
				margin-top: -25px;
				left: 10px;
			}
			
			button:nth-of-type(2){
				top: 50%;
				margin-top: -25px;
				right: 10px;
			}
			
			button:hover{
				cursor: pointer;
				background: #000;
				color: #fff;
			}
			
			ul{
				width: 50px;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				margin-left: -25px;
				bottom: 20px;
			}
			
			li{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #000;
				cursor: pointer;
			}
			
			img.active{
				opacity: 1;
			}
			
			li.active{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<div class="rotation">
			<img class="active" src="img/house1.jpg"/>
			<img src="img/house3.jpg"/>
			<img src="img/house4.jpg"/>
			<!--<img src="img/showsmall1.jpg"/>-->
			<button><</button>
			<button>></button>
			
			<ul>
				<li zhn="0" class="active"></li>
				<li zhn="1"></li>
				<li zhn="2"></li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var div=document.getElementsByTagName("div")[0];
			var imgs=document.getElementsByTagName("img");
			var lis=document.getElementsByTagName("li");
			var j=0;
			div.onclick=()=>{
				var target=event.target;
				console.log(target);
				
				if(target.innerText==">"){
					j++;
					j==lis.length&&(j=0);
					j==-1&&(j=lis.length-1);
					for(var i=0;i<lis.length;i++){
						lis[i].className="";
						imgs[i].className="";
					}
					lis[j].className="active";
					imgs[j].className="active"
				}else if(target.innerText=="<"){
					j--;
					j==lis.length&&(j=0);
					j==-1&&(j=lis.length-1);
					for(var i=0;i<lis.length;i++){
						lis[i].className="";
						imgs[i].className="";
					}
					lis[j].className="active";
					imgs[j].className="active"					
				}else if(target.nodeName=="LI"){
					var flag=target.getAttribute("zhn");
					j=flag;
					
					for(var i=0;i<lis.length;i++){
						lis[i].className="";
						imgs[i].className="";
					}
					lis[j].className="active";
					imgs[j].className="active"		
				}
			}
			
			timer=setInterval(()=>{
				j++;
					j==lis.length&&(j=0);
					j==-1&&(j=lis.length-1);
					for(var i=0;i<lis.length;i++){
						lis[i].className="";
						imgs[i].className="";
					}
					lis[j].className="active";
					imgs[j].className="active"
			},2000)
			
			div.onmouseover=()=>{
				clearInterval(timer);
			}
			
			div.onmouseout=()=>{
				timer=setInterval(()=>{
				j++;
					j==lis.length&&(j=0);
					j==-1&&(j=lis.length-1);
					for(var i=0;i<lis.length;i++){
						lis[i].className="";
						imgs[i].className="";
					}
					lis[j].className="active";
					imgs[j].className="active"
			},2000)
			}
		</script>
	</body>
</html>
